import {
  Badge,
  Card,
  Descriptions,
  Divider,
  Table,
  Typography,
  Button,
  message,
  Image,
} from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { useLocation } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import { queryOrderInfo } from '@/services/ant-design-pro/apis';
const { Text, Link } = Typography;
import styles from './style.less';
import { PresetColorTypes } from 'antd/es/_util/colors';

const Role = (props) => {
  const location = useLocation();
  const handleMT = async () => {
    const hide = message.loading('正在配置');
    try {
      await DoAgentOrderMT({ ...orderInfo });
      hide();
      message.success('配置成功');
      return true;
    } catch (error) {
      hide();
      message.error('配置失败请重试！');
      return false;
    }
  };

  // const handleNotice = async () => {
  //   const hide = message.loading('正在提交');
  //   try {
  //     await AngetNotice({ orderId: orderInfo.id });
  //     hide();
  //     hide();
  //     message.success('提交成功');
  //     return true;
  //   } catch (error) {
  //     hide();
  //     message.error('提交失败请重试！');
  //     return false;
  //   }
  // };

  const onCopy = (item) => {
    var certB64 =
      '卡号：' +
      item?.code +
      ',卡密：' +
      item?.key +
      ',链接：' +
      item?.url +
      ',有效期:' +
      item?.effstart +
      ',失效期：' +
      item?.effend +
      ',类型：' +
      item?.type;

    let oInput = document.createElement('input');
    oInput.value = certB64;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand('Copy'); // 执行浏览器复制命令
    message.success('复制成功');
    oInput.remove();
  };

  const handleKG = async () => {
    const hide = message.loading('正在配置');
    try {
      await DoAgentOrderKG({ ...orderInfo });
      hide();
      hide();
      message.success('配置成功');
      return true;
    } catch (error) {
      hide();
      message.error('配置失败请重试！');
      return false;
    }
  };

  const [orderInfo, setOrderInfo] = useState({});
  const [cardData, setOrderCards] = useState([]);
  const [payOrder, setPayOrder] = useState([]);
  const [refundOrder, setRefundOrder] = useState([]);

  function showStatus() {
    if (orderInfo?.orderStatus == 'SUCCESS') {
      return <Text type="success">充值成功</Text>;
    }
    if (orderInfo?.orderStatus == 'NON_PAYMENT') {
      return <Text type="secondary">未支付</Text>;
    }
    if (orderInfo?.orderStatus == 'IN_PROCESS') {
      return <Text type="secondary">充值中</Text>;
    }
    if (orderInfo?.orderStatus == 'FAILED') {
      return <Text type="danger">充值失败</Text>;
    }

    if (orderInfo?.orderStatus == 'WAIT_FOR') {
      return <Text type="danger">待状态更新</Text>;
    }

    if (orderInfo?.orderStatus == 'TIMEOUT') {
      return <Text type="danger">订单超时</Text>;
    }
    return <Text type="warning">接口错误</Text>;
  }

  useEffect(() => {
    queryOrderInfo({ orderId: location.query?.orderId }).then((val) => {
      try {
        setOrderInfo(val.order);
        setRefundOrder(val.refundOrder);
        try {
          var cardData = val.cards;
          var payData = val.payOrder;
          var refundData = val.refundOrder;

          setPayOrder(val.payOrder);
          var cdatas = [];
          var pdatas = [];
          var rdatas = [];
          cardData.map((item, index) => {
            var obj = { ...item, id: index };
            cdatas.push(obj);
          });
          setOrderCards(cdatas);

          payData.map((item, index) => {
            var obj = { ...item, id: index };
            pdatas.push(obj);
          });
          setPayOrder(pdatas);

          refundData.map((item, index) => {
            var obj = { ...item, id: index };
            rdatas.push(obj);
          });
          setRefundOrder(rdatas);
        } catch (error) {}
      } catch (eror) {}
    });
  }, []);

  const renderContent = (value, row, index) => {
    const obj = {
      children: value,
      props: {},
    };

    // if (index === basicGoods.length) {
    //   obj.props.colSpan = 0;
    // }

    return obj;
  };
  const refundColumns = [
    {
      title: '退款单号',
      dataIndex: 'refundNo',
      key: 'refundNo',
      render: renderContent,
    },
    {
      title: '退款状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        if (text == 'SUCCESS') {
          return <Badge status="success" text="退款成功" />;
        }
        if (text == 'PENDING') {
          return <Badge status="processing" text="待处理" />;
        }
        if (text == 'CLOSED') {
          return <Badge status="error" text="失败" />;
        }
        if (text == 'ABNORMAL') {
          return <Badge status="secondary" text="退款中" />;
        }
      },
    },
    {
      title: '到账信息',
      dataIndex: 'refundAccount',
      key: 'refundAccount',
      render: renderContent,
    },
    {
      title: '实际退款金额',
      dataIndex: 'actualRefundAmount',
      key: 'actualRefundAmount',
      render: renderContent,
    },

    {
      title: '异常信息',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      render: renderContent,
    },
    {
      title: '退款原因',
      dataIndex: 'refundReason',
      key: 'refundReason',
      render: renderContent,
    },

    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      render: renderContent,
    },
  ];

  const payColumns = [
    {
      title: '支付单号',
      dataIndex: 'payOrderNo',
      key: 'payOrderNo',
      render: renderContent,
    },
    {
      title: '支付状态',
      dataIndex: 'status',
      key: 'status',
      render: (text) => {
        if (text == 'PAYMENT_SUCCESS') {
          return <Badge status="success" text="支付成功" />;
        }
        if (text == 'DURING_THE_PAYMENT') {
          return <Badge status="processing" text="支付中" />;
        }
        if (text == 'PAYMENT_FAILURE') {
          return <Badge status="error" text="支付失败或支付超时" />;
        }
        if (text == 'TO_BE_PAYMENT') {
          return <Badge status="secondary" text="待支付" />;
        }
      },
    },
    {
      title: '支付方式',
      dataIndex: 'payType',
      key: 'payType',
      render: (text) => {
        if (text == 'alPay') {
          return <Badge status="success" text="支付宝" />;
        }
        if (text == 'wxPay') {
          return <Badge status="success" text="微信" />;
        }
        if (text == 'balancePay') {
          return <Badge status="error" text="余额" />;
        }
      },
    },
    {
      title: '支付金额',
      dataIndex: 'payPrice',
      key: 'payPrice',
      render: renderContent,
    },
    {
      title: '支付信息',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      render: renderContent,
    },
    {
      title: '描述信息',
      dataIndex: 'description',
      key: 'description',
      render: renderContent,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      render: renderContent,
    },
  ];

  const cardColumns = [
    {
      title: '卡号',
      dataIndex: 'code',
      key: 'code',
      render: renderContent,
    },
    {
      title: '卡密',
      dataIndex: 'keyXc',
      key: 'keyXc',
      render: renderContent,
    },
    {
      title: '链接',
      dataIndex: 'url',
      key: 'url',
      render: renderContent,
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: renderContent,
    },
    {
      title: '有效期',
      dataIndex: 'effstart',
      key: 'effstart',
      render: renderContent,
    },
    {
      title: '失效期',
      dataIndex: 'effend',
      key: 'effend',
      render: renderContent,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="copy"
          onClick={() => {
            onCopy(record);
          }}
        >
          复制
        </a>,
      ],
    },
  ];

  return (
    <PageContainer title="订单详情">
      <Card bordered={false}>
        <Descriptions
          title="订单详情"
          style={{
            marginBottom: 32,
          }}
        >
          {orderInfo.agentOrderInfoVO?.brandImg != null ? (
            <Descriptions.Item label="品牌图片">
              <Image width={100} src={orderInfo.agentOrderInfoVO?.brandImg} />
            </Descriptions.Item>
          ) : null}
          {orderInfo.agentOrderInfoVO?.brandName != null ? (
            <Descriptions.Item label="品牌名称">
              {orderInfo.agentOrderInfoVO?.brandName}
            </Descriptions.Item>
          ) : null}
          {orderInfo.agentOrderInfoVO?.skuName != null ? (
            <Descriptions.Item label="规格名称">
              {orderInfo.agentOrderInfoVO?.skuName}
            </Descriptions.Item>
          ) : null}
          <Descriptions.Item label="订单号">{orderInfo?.orderNo}</Descriptions.Item>
          <Descriptions.Item label="订单状态">
            <div>{showStatus()}</div>
          </Descriptions.Item>
          <Descriptions.Item label="充值号码">{orderInfo?.account}</Descriptions.Item>
          <Descriptions.Item label="订单时间">{orderInfo?.gmtCreate}</Descriptions.Item>
          <Descriptions.Item label="订单金额">{orderInfo?.totalPrice}</Descriptions.Item>
          <Descriptions.Item label="用户名称">{orderInfo?.name}</Descriptions.Item>
          <Descriptions.Item label="用户账号">{orderInfo?.phone}</Descriptions.Item>
          <Descriptions.Item label="接口提示">
            <Text type="danger">{orderInfo?.errorMsg}</Text>
          </Descriptions.Item>
          {/* <Descriptions.Item label="主动回调">
            <Button danger onClick={handleNotice}>
              回调
            </Button>
          </Descriptions.Item> */}
        </Descriptions>
        <Divider
          style={{
            marginBottom: 32,
          }}
        />
        <Descriptions
          title="产品信息"
          style={{
            marginBottom: 32,
          }}
        >
          <Descriptions.Item label="产品单价">{orderInfo?.productPrice}</Descriptions.Item>
          <Descriptions.Item label="产品名称">{orderInfo?.productName}</Descriptions.Item>
        </Descriptions>
        <div className={styles.title} style={{ color: '#1E90FF' }}>
          支付信息
        </div>
        <Table
          style={{
            marginBottom: 15,
          }}
          pagination={false}
          dataSource={payOrder}
          columns={payColumns}
          rowKey="id"
        />
        <div className={styles.title} style={{ color: '#CD5C5C' }}>
          退款信息
        </div>
        <Table
          style={{
            marginBottom: 15,
          }}
          pagination={false}
          dataSource={refundOrder}
          columns={refundColumns}
          rowKey="id"
        />
        <div className={styles.title}>卡密明细列表</div>
        <Table
          style={{
            marginBottom: 24,
          }}
          pagination={false}
          dataSource={cardData}
          columns={cardColumns}
          rowKey="id"
        />
      </Card>
    </PageContainer>
  );
};

export default Role;
